// src/app/workspace/[workspaceId]/channel/[channelId]/page.tsx
'use client';
import React, {useEffect, useRef, useState} from 'react';
import {useChannelId} from "@/hooks/social/use-channel-id";
import {useGetChannel} from "@/features/channels/api/use-get-channel";
import {Loader, TriangleAlert} from "lucide-react";
import {Channel} from "@/lib/social/types";
import Header from "@/app/social/workspace/[workspaceId]/channel/[channelId]/_components/header";
import ChatInput from "@/app/social/workspace/[workspaceId]/channel/[channelId]/_components/chat-input";
import {useGetMessages} from "@/features/messages/api/use-get-messages";
import MessageList from "@/components/social/message-list";

// 强制每个请求动态渲染
// export const dynamic = 'force-dynamic'

// todo websocket
const Page = () => {
    const channelId = useChannelId();
    const [channel, setChannel] = useState<Channel>();
    const [loading, setLoading] = useState(false);
    const [status, setStatus] = useState('');
    const loadMoreRef = useRef<Function>(null);

    useEffect(() => {
        (async () => {
            const {data: c, isLoading: cLoading,} = await useGetChannel({id: channelId})
            setLoading(cLoading)
            setChannel(c)
        })()
        // }, [channelId, loading, channel])
    }, [channelId])

    const [messages, setMessages] = useState();
    useEffect(() => {
        (async () => {
            const {data, status, loadMode} = await useGetMessages(
                {channelId}
            )
            // console.log(data, status)
            setMessages(data)
            setStatus(status || 'loading')
            // @ts-ignore
            loadMoreRef.current = loadMode
        })()
    }, [])

    if (loading) {
        return <div className={`h-full flex-1 flex items-center
            justify-center flex-col gap-2`}>
            <Loader className={`size-5 animate-spin text-muted-foreground`}/>
        </div>
    }

    if (!channel) return <div className={`h-full flex-1 flex items-center
            justify-center flex-col gap-2`}>
        <TriangleAlert className={`size-6 text-muted-foreground`}/>
        <span className={`text-sm text-muted-foreground`}>Channel not found</span>
    </div>

    return (
        <div className={`flex flex-col h-full`}>
            <Header title={channel?.name}/>
            {/*<div className={`flex-1`}>*/}
            {/*    {JSON.stringify(messages)}*/}
            {/*</div>*/}
            <MessageList
                channelName={channel.name}
                // channelCreationTime={channel.createdTime}
                channelCreationTime={(new Date()).getTime()}
                data={messages}
                // @ts-ignore
                loadMore={loadMoreRef.current!}
                isLoadingMore={status === 'LoadingMore'}
                canLoadMore={status === 'CanLoadMore'}
            />
            <ChatInput
                // setMessages={setMessages}
                       placeholder={`Message # ${channel?.name}`}/>
        </div>
    );
};

export default Page;